<template>
    <div class="box">
        <div class="box2">
            <div class="header">
            <h3 >用户列表</h3>
            <el-button type="primary" style="margin-left: 16px;margin-top: 20px"  @click="addconservator ">
                添加
            </el-button>

<!-- 
            <el-drawer :model-value="isshow" :with-header="false  ">
                
            </el-drawer> -->

        </div>
        </div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="序号" width="180" #default="scope">{{ scope.$index +1 }}</el-table-column>
            <el-table-column prop="date" label="用户名" width="180" #default="scope">{{ scope.row.username }}</el-table-column>
            <el-table-column prop="date" label="手机号" width="180" #default="scope">{{ scope.row.mobile }}</el-table-column>
            <el-table-column prop="date" label="邮箱" width="180" #default="scope">{{ scope.row.email }}</el-table-column>
            <el-table-column prop="date" label="性别" width="180" #default="scope" >
                <el-tag  class="ml-2" >
                {{ scope.row.gender == 1 ? '男' : '' }}
                {{ scope.row.gender == 2 ? '女' : '' }}
                {{ scope.row.gender == 3 ? '保密' : '' }}
                </el-tag>
            </el-table-column>
            <el-table-column prop="date" label="状态" width="180" #default="scope">
                <el-tag class="ml-2" type="danger">禁用</el-tag>
            </el-table-column>
            <el-table-column prop="address" label="操作" >
                <template  #default="scope">
                <el-button size="small" @click="handleEdit(scope,scope.row )">编辑</el-button>
                <el-button size="small" type="danger" 
                        >删除</el-button>
                </template>
            </el-table-column> 
        </el-table>
 <!-- 分页组件 -->
            <div class="demo-pagination-block">
                <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="1"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="sizes, prev, pager, next"
                :total="tatalnum"
                />
            </div>
            
            <div class="form" v-show="isshow">
                        <el-form ref="ruleFormRef"  :model="ruleForm" status-icon :rules="rules" label-width="120px" class="demo-ruleForm">
                        <span>添加用户</span>
                        <el-form-item label="用户名" prop="username">
                        <el-input v-model="ruleForm.username" type="text" autocomplete="off" />
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                        <el-input v-model="ruleForm.password" type="text" autocomplete="off"/>
                        </el-form-item>
                        <el-form-item label="邮箱" prop="email">
                        <el-input v-model="ruleForm.email" />
                        </el-form-item>
                        <el-radio-group v-model="ruleForm.gender" prpo="gender">
                            <el-radio label="1">男</el-radio>
                            <el-radio label="2">女</el-radio>
                            <el-radio label="3">保密</el-radio>
                        </el-radio-group>
                        <el-form-item label="手机号" prop="mobile">
                        <el-input v-model.number="ruleForm.mobile" />
                        </el-form-item>
                        <el-button size="small" @click="addconfirm">添加</el-button>
                        <el-button size="small" type="danger" @click="cancelFn"
                                >取消</el-button>
                    </el-form>
                    </div>
            
        </div>
        <!-- 添加表单 -->

</template>
<script setup lang='ts'>
import {ref,reactive} from 'vue'
import {getuserdata} from '@/api/home'
import {postadddata} from '@/api/addconservator'

const acl = JSON.parse((localStorage.getItem('acl')) as any) 
const jwt = localStorage.getItem('jwt') 
console.log(jwt);

// 接s手数据
const tableData = ref<any>([])
// 定义状态抽屉
const isshow = ref<boolean>(false)

const addconservator = () => {
    console.log(11);
    isshow.value=true
    
}
    // 请求数据
const getuserlist = () => {
    getuserdata({Authorization:''}).then(res => {
    console.log(res);
    if(res.data.errNo == 0){
        tableData.value = res.data.paginate.data
        tatalnum.value = res.data.paginate.last_page
        key.value = res.data.context.jwt
        // console.log(key.value);
        
    }
})
}
getuserlist()

const direction = ref('rtl')
const ruleForm = reactive<any>({
  username: '',
  password: '',
  key:'',
  email:'',
  mobile:'',
  gender:'1'
})
const rules = reactive<any>({
  username: [{ required: true, trigger: 'blur' }],
  password: [{ required: true,  trigger: 'blur' }],
  captcha: [{ required: true, trigger: 'blur' }],
})

const key = ref ('')
// 添加确认
const addconfirm = () => {
    // 请求添加数据
    postadddata(ruleForm).then(res => {
        console.log(ruleForm);
        ruleForm.key = key.value
        console.log('2585',res);
        if(res.data.errNo == 0 ) {
            // 重新渲染数据
            getuserlist()
            location.reload() 
        }
    })
}







// 添加取消
const cancelFn = () => {
    isshow.value = false
} 





// 分页处理
const tatalnum = ref<any>(0)
const currentPage = ref<any>(5)
const pageSize = ref<any>(10)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = () =>{
      tableData.slice(
        (currentPage - 1) * pageSize,
        currentPage * pageSize
      )
    }


const  handleEdit = (scope:any,row:any) =>  {
      console.log('scopec',scope);

    }
</script>
<style lang='scss' scoped>
.form{
    padding: 20px;
    color: white;
    background-color: aqua;
    width: 400px;
    height: 400px;
    position: fixed;  
    left: 40%;
    right: 0;
    top: 35%;
    bottom:0;
    z-index: 666;
    
}
.box{
    width: 100%;
    border: 1px solid black;
    .el-table {
        width: 100%;
    }
    .box2{
        // width: 100%;
        height: 73px;
        // line-height: 73px;
        padding: 0 45px;
        background-color: #fff;
        .header{
        // width: 100%;
        line-height: 73px;
        display: flex;
        justify-content: space-between;

}
    }
}

</style>
